@mixin sprite_mixin($arr) {
  $x: nth($list: $arr, $n: 1);
  $y: nth($list: $arr, $n: 2);
  background: url('../img/sprite.png') $x $y no-repeat;
}

$process_cate_part1_map: (cate_1: -109px -270px, cate_2: -0px -380px, cate_3: -436px -270px, cate_4: -327px -270px, cate_5: -218px -270px);
$pprocess_cate_part1_keys: map-keys($map: $process_cate_part1_map);

$process_cate_part2_map: (cate_6: -109px -270px, cate_7: -465px -0px, cate_8: -327px -270px, cate_9: -419px -135px);
$pprocess_cate_part2_keys: map-keys($map: $process_cate_part2_map);

$process_arrow_part1_map: (arrow_1: -404px -489px, arrow_2: -434px -489px, arrow_3: -568px -195px, arrow_4: -374px -489px, arrow_5: -344px -489px);
$process_arrow_part1_keys: map-keys($map: $process_arrow_part1_map);

$process_arrow_part2_map: (arrow_6: -404px -489px, arrow_7: -434px -489px, arrow_8: -374px -489px, arrow_9: -344px -489px);
$process_arrow_part2_keys: map-keys($map: $process_arrow_part2_map);

$process_border_part1_map: (border_1: -240px -489px, border_2: -136px -489px, border_3: -475px -440px, border_4: -371px -440px, border_5: -267px -440px);
$process_border_part1_keys: map-keys($map: $process_border_part1_map);

$process_border_part2_map: (border_6: -240px -489px, border_7: -136px -489px, border_8: -371px -440px, border_9: -267px -440px);
$process_border_part2_keys: map-keys($map: $process_border_part2_map);

$process_cate_bg_part1_map: (bg_1: 0px 0px, bg_2: -155px -0px, bg_3: -310px -0px, bg_4: -0px -135px, bg_5: -155px -135px);
$process_cate_bg_part1_keys: map-keys($map: $process_cate_bg_part1_map);

$process_cate_bg_part2_map: (bg_6: 0px 0px, bg_7: -155px -0px, bg_8: -0px -135px, bg_9: -155px -135px);
$process_cate_bg_part2_keys: map-keys($map: $process_cate_bg_part2_map);

.process_item {
  position: relative;
  width: 110px;
  text-align: center;
  float: left;
  margin: 0 30px;

  .process_cate_rotate_bg {
    position: absolute;
    left: -22.5px;
    top: -12.5px;
    width: 155px;
    height: 135px;
    transform: rotate(0deg);
    transition: transform 1s ease-out .1s;
    &.rotate {
      transform: rotate(360deg);
    }
  }
  
  .process_cate_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 155px;
    height: 135px;
    transition: transform .5s ease-out;
    transform: scale(0);
    z-index: 0;

    // process_con_part1
    @each $cateName in $process_cate_bg_part1_keys {
      &.#{$cateName} {
        @include sprite_mixin(map-get($process_cate_bg_part1_map, #{$cateName}));
      }
    }

    // process_con_part2
    @each $cateName in $process_cate_bg_part2_keys {
      &.#{$cateName} {
        @include sprite_mixin(map-get($process_cate_bg_part2_map, #{$cateName}));
      }
    }

    &.scale {
      transform: scale(1);
    }
  }

  .process_cate {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    text-align: center;
    line-height: 110px;
    margin-bottom: 20px;
    cursor: pointer;
    z-index: 2;

    // process_con_part1
    @each $cateName in $pprocess_cate_part1_keys {
      &.#{$cateName} {
        @include sprite_mixin(map-get($process_cate_part1_map, #{$cateName}));
      }
    }

    // process_con_part2
    @each $cateName in $pprocess_cate_part2_keys {
      &.#{$cateName} {
        @include sprite_mixin(map-get($process_cate_part2_map, #{$cateName}));
      }
    }
  }
  .process_down_arrow {
    width: 30px;
    height: 26px;
    display: inline-block;
    margin-bottom: 10px;
    
    // process_con_part1
    @each $arrowName in $process_arrow_part1_keys {
      &.#{$arrowName} {
        @include sprite_mixin(map-get($process_arrow_part1_map, #{$arrowName}));
      }
    }

    // process_con_part2
    @each $arrowName in $process_arrow_part2_keys {
      &.#{$arrowName} {
        @include sprite_mixin(map-get($process_arrow_part2_map, #{$arrowName}));
      }
    }
  }
  .process_detail_item {
    width: 104px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 5px;

    // process_con_part1
    @each $borderName in $process_border_part1_keys {
      &.#{$borderName} {
        @include sprite_mixin(map-get($process_border_part1_map, #{$borderName}));
      }
    }

    // process_con_part2
    @each $borderName in $process_border_part2_keys {
      &.#{$borderName} {
        @include sprite_mixin(map-get($process_border_part2_map, #{$borderName}));
      }
    }
  }
}
.process_right_arrow {
  width: 55px;
  height: 40px;
  float: left;
  margin-top: 35px;
  @include sprite_mixin((-109px, -440px));
}

@keyframes processItemAnimation1 {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes processItemAnimation2 {
  from { transform: rotate(0deg); visibility: hidden; }
  to { transform: rotate(360deg); visibility: visible; }
}